<template>
    <div>
        <div style="padding: 10px;width:90%;">
            <!--对话框-添加题目-->
            <el-dialog :visible.sync="questionDialogVisible" title="选择添加的试题">
                <!--            搜索区域-->
                <div style="margin:10px 0;">
                    <el-select clearable filterable v-model="questionType" placeholder="请选择题目类型" style="width: 200px;">
                        <el-option v-for="item in question" :key="item.value" :label="item.name"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input placeholder="请输入关键字" v-model="questionTitle" style="width: 200px;" clearable>
                        <template slot="prepend">题目：</template>
                    </el-input>

                    <el-button type="primary" style="margin-left: 5px;" @click="load"> 查询</el-button>
                </div>
                <el-table
                        :data="tableData"
                        style="width: 100%;"
                        stripe
                        @selection-change="handleSelectionChange"
                        class="tableClass"
                        ref="selectedQuestionList"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
<!--                    <el-table-column prop="questionId" label="题号" width="100"></el-table-column>-->
                    <el-table-column prop="questionType" label="题目类型">
                        <template slot-scope="scope" width="100">
                            <el-tag type="primary" v-if="scope.row.questionType === 1">单选题</el-tag>
                            <el-tag type="warning" v-if="scope.row.questionType === 2">多选题</el-tag>
                            <el-tag type="success" v-if="scope.row.questionType === 3">判断题</el-tag>
                            <el-tag type="warning" v-if="scope.row.questionType === 4">填空题</el-tag>
                            <el-tag type="info" v-if="scope.row.questionType === 5">客观题</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="题干" width="300">
                        <template slot-scope="scope">
                            <p v-html='scope.row.questionTitle'></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="teacherName" label="出题老师" width="100"></el-table-column>
                    <el-table-column prop="courseName" label="课程名称" width="100"></el-table-column>

                    <el-table-column prop="correctAnswer" label="正确答案" width="100"></el-table-column>
                    <el-table-column prop="score" label="分数" width="100"></el-table-column>
                    <el-table-column prop="difficult" label="难度" width="100"></el-table-column>

                </el-table>
                <!--            分页栏-->
                <div style="margin: 10px 0;">
                    <el-pagination
                            v-model:pageNum="pageNum"
                            :page-sizes="[5, 10, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save">确 定</el-button>
                    <el-button @click="toggleSelection()">取 消</el-button>
                </div>
            </el-dialog>
        </div>

    </div>

</template>
<style>
    .tableClass .cell {
        padding: 0 !important;
        height: 40px;
        line-height: 30px !important;
        text-align: center;
    }
</style>
<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";

    export default {
        name: 'SelectQuestion',
        components: {},
        props: {
            questionDialogVisible: Boolean,
            required: true,
            courseId: String
        },
        data() {
            return {
                form: {},
                roles: {},
                serverIp: serverIp,
                dialogVisible: false,
                selectedQuestionList: [],
                search: '',
                questionTitle: '',
                questionType: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                tableData: [],
                question: [{name: "单选题", value: 1},{name: "多选题", value: 2},{name: "判断题", value: 3},{name: "填空题", value: 4},{name: "客观题", value: 5}],
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                var mess = this;
                // get方法需要params，post不要 "http://localhost:9090/question"
                request.get("/question", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        questionTitle: this.questionTitle,
                        questionType: this.questionType,
                        courseId:this.courseId,
                    }
                }).then(res => {
                    console.log("res:", res);
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }, function (json) {
                    mess.$message.error(json);
                })
            },
            handleSizeChange(pageSize) { //改变当前每页的个数触发
                this.pageSize = pageSize
                console.log(pageSize)
                this.load()
            },
            handleCurrentChange(pageNum) {  //改变当前页码触发
                this.pageNum = pageNum
                this.load()
            },
            handleSelectionChange(val) {
                //保存已选择的行
                this.selectedQuestionList = val;
                console.log("selectedQuestionList:", this.selectedQuestionList)
            },
            toggleSelection(rows) {
                //清空选择
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.selectedQuestionList.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.selectedQuestionList.clearSelection();
                }
            },
            save() {
                //回传已选择的题目list
                this.$emit('trans_select', this.selectedQuestionList)
                this.toggleSelection();//清空选择

            }


        }

    }
</script>


